<template>
    <div class="case">
        <!-- 病例 -->
        <div class="operate">
            <el-button type="primary" @click="addCase">添加病例</el-button>
            <div class="search">
                <el-input input-style="width: 70%;margin-right: 10px;" v-model="searchName" placeholder="请输入账号查询" />
                <el-button type="primary" @click="search">查询</el-button> 
            </div>
        </div>
        <div class="userTable">
            <el-table border v-loading="loading" :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="id" width="100" />
                <el-table-column label="病例照片" width="130">
                    <template #default="scope">
                        <img style="width: 40px;" :src=scope.row.casePhotosBase64 />
                    </template>
                </el-table-column>
                <el-table-column prop="charge" label="费用" width="130" />
                <el-table-column prop="giveService" label="服务" width="130" />
                <el-table-column prop="uname" label="客户名" width="130" />
                <el-table-column prop="addr" label="用户地址" width="260" />
                <el-table-column prop="descrs" label="描述" width="190" />
                <el-table-column prop="createTime" label="时间" width="190" />
                <el-table-column fixed="right" label="操作" width="190">
                <template #default="scope">
                    <el-button type="primary" size="small" @click="handleClick(scope)">修改</el-button>
                    <el-button type="danger" size="small" @click="deleteClick(scope)">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
            <el-pagination @current-change="clickChange" background layout="pager" :page-size="pagination.end" :total="pagination.total" />
        </div>
        <el-drawer
            v-model="drawer"
            :title=Title
            direction="rtl"
        >
            <div class="fromOperate" style="margin-top: 10px;">
                <el-form :model="fromData" label-width="90px">
                    <el-form-item label="用户">
                        <el-select
                                v-model="QueryUname"
                                filterable
                                @input="QueryUser"
                                @change="changeNumVal"
                                placeholder="输入账号查询"
                            >
                            <el-option
                                v-for="(item,index) in userData"
                                :key="index"
                                :label="item.userName"
                                :value="item.Id"
                                />
                            </el-select>
                        <!-- <el-input v-model="fromData.uid" /> -->
                    </el-form-item>
                    <el-form-item label="服务">
                        <el-input v-model="fromData.giveService" />
                    </el-form-item>
                    <el-form-item label="费用">
                        <el-input v-model="fromData.charge" />
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="fromData.descrs" />
                    </el-form-item>
                    <el-form-item label="病例照片">
                        <div id="fileSelect">
                            <input :disabled="flagStatus" @change="getFile($event)" type="file" />
                            <span v-if="SrcImg==null">+</span>
                            <img style="width: 80px;" v-else :src="SrcImg" />
                        </div>
                    </el-form-item>
                    <el-form-item label="用户签名">
                        <div id="fileSelect" @click="selectSign">
                            <span v-if="SrcSign==null">+</span>
                            <img style="width: 80px;" v-else :src="SrcSign" />
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">添加</el-button>
                        <el-button @click="drawer=false">取消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>
        <el-dialog
            v-model="dialogVisible"
            title="用户签名"
            width="40%"
            height="300px"
        >
           <div class="contract">
                <Contract @getfiles="getUsign" :dialogVisible="dialogVisible"></Contract>
           </div>
        </el-dialog>
    </div>
</template>
<script>
import { defineComponent } from '@vue/composition-api'
import { getCurrentInstance} from 'vue'
import { useRouter,useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { ElMessageBox,ElMessage  } from 'element-plus'
import Contract from './assist/contract'
export default defineComponent({
    components:{
        Contract
    },
    data(){
        return{
            searchName:'',
            user:null,
            Identify:'0',
            loading:true,
            dialogVisible:false,
            tableData:[],
            userData:[],
            fromData:{
                "id":0,
                "did":0,
                "uid":0,
                "giveService":'',
                "charge":0,
                "descrs":'',
                "casePhotos":null,
                "usign":null
            },    
            QueryUname:'',
            drawer:false,
            Title:"添加",
            pagination:{
                start:0,
                end:10,
                current:1,
                total:100
            },
            SrcImg:null,
            SrcSign:null
        }
    },
    setup() {
        // 路由
        const router = useRouter();
        const route = useRoute();
        // vuex的数据对象
        const store = useStore();
        const { proxy } = getCurrentInstance();
        return{
            proxy,
            route,
            router,
            store
        } 
    },
    created () {
        this.user = this.store.state.UserMessage;
        this.LoadData();
        this.QueryUser();
    },
    methods:{
        LoadData(){
            let self = this;
            let row = self.pageData();
            row.name = ' ';
            row.uid = self.user.Id;
            self.$http.post(`${self.baseUrl}/case/selectName`,row).then(res=>{
                let {document,total} = res.data;
                self.tableData = document;
                self.pagination.total = total;
                self.loading = false;
            })
        },
        search(){
            let self = this;
            let row = self.pageData();
            row.name = self.searchName;
            row.current = 1;
            row.uid = self.user.Id;
            self.$http.post(`${self.baseUrl}/case/selectName`,row).then(res=>{
                let {document,end,start,total} = res.data;
                self.tableData = document;
                self.pagination.start = start;
                self.pagination.end = end;
                self.pagination.total = total;
            })
        },
        QueryUser(){
            let self = this;
            self.$http.get(`${self.baseUrl}/login/SearchName?name=${self.QueryUname}`).then(msg=>{
                self.userData = msg.data;
            })
        },
        changeNumVal(){
            this.fromData.uid = this.QueryUname;
        },
        clickChange(msg){
            this.pagination.current = msg;
            this.LoadData();
        },
        handleClick(msg){
            this.fromData = msg.row;
            this.QueryUname = msg.row.uname;
            this.SrcImg = msg.row.casePhotosBase64;
            this.SrcSign = msg.row.usignBase64;
            this.drawer = true;
            this.Title = "修改";
        },
        addCase(){
            this.drawer = true;
            this.Title = "添加";
            this.QueryUname = "";
            this.fromData = this.initial();
        },
        deleteClick(msg){
            let self = this;
            ElMessageBox.confirm(`确定要删除此项病例吗？`,'删除',{
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
            }).then(() => {
                self.$http.get(`${self.baseUrl}/case/deleteCase?id=${msg.row.id}`).then(res=>{
                    if(res.data!=0){
                        ElMessage({
                            message:"删除成功",
                            type:'success'
                        })
                        self.LoadData()
                    }else{
                        ElMessage({
                            message:"删除失败",
                            type:'error'
                        })
                    }
                })
            }).catch(() => {})
        },
        onSubmit(){
            let self = this;
            let f = new FormData();
            f.append("GiveService",this.fromData.giveService);
            f.append("charge",parseFloat(this.fromData.charge));
            f.append("descrs",this.fromData.descrs);
            if(this.fromData.casePhotos!=null) f.append("CasePhotos",this.fromData.casePhotos);
            if(this.fromData.usign!=null) f.append("usign",this.fromData.usign);
            f.append("id",this.fromData.id);
            f.append("did",this.user.Id);
            f.append("uid",this.fromData.uid);
            let path = this.Title == "添加" ? "addCase" : "updateCase";
            self.$http.post(`${self.baseUrl}/case/${path}`,f).then(res=>{
                if(res.data==1){
                    ElMessage({
                        message:"操作成功",
                        type:'success'
                    })
                    self.drawer = false;
                    self.LoadData();
                }
            })
        },
        getFile(msg){
            let self = this;
            let file = msg.target.files[0];
            self.fromData.casePhotos = file;
            self.convertPhoto(file)
        },
        getUsign(msg){
            this.fromData.usign = msg.f;
            this.convertSign(msg.f);
            this.dialogVisible = false;
        },
        convertPhoto(file){
            let self = this;
            const reader = new FileReader();
            reader.onload = function(e){
                self.SrcImg = e.target.result;
            }
            reader.readAsDataURL(file);
        },
        // 将签名转换成base64
        convertSign(file){
            let self = this;
            const reader = new FileReader();
            reader.onload = function(e){
                self.SrcSign = e.target.result;
            }
            reader.readAsDataURL(file);
        },
        selectSign(){
            this.dialogVisible = true;
        },
        pageData(){
            let row = {};
            row.end = this.pagination.end;
            row.current = this.pagination.current;
            return row;
        },
        initial(){
            return{
                "id":0,
                "did":0,
                "uid":0,
                "giveService":'',
                "charge":0,
                "descrs":'',
                "casePhotos":null,
                "usign":null
            }
        }
    }
})
</script>
<style scoped>
    .case{
        height: 100%;
    }
    .userTable{
        height: calc(100% - 60px);
    }
    .el-table{
        height: 100%;  
    }
    .search{
        float: right;
        margin-bottom: 10px;
    }
</style>